﻿<!DOCTYPE html>
<html>

<head>
    <title>LayaAir引擎</title>
    <meta charset='utf-8' />
    <meta name='renderer' content='webkit' />
    <meta name='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' />
    <meta name='laya' screenorientation='landscape' />
    <meta http-equiv='expires' content='0' />
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
    <meta http-equiv='expires' content='0' />
    <meta http-equiv='Cache-Control' content='no-siteapp' />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="full-screen" content="true">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="360-fullscreen" content="true">
    <script>
        function GetURLString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return (r[2]);
            return null;
        }
    </script>
</head>

<body onload="load()">
    <style>
        html,
        body {
            background-color: black;
            padding: 0;
            border: 0;
            margin: 0;
            height: 100%;
            position: relative;
        }
        
        #movie {
            position: absolute;
            top: 0px;
            left: 0px;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        #play {
            width: 65px;
            height: 65px;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: #000000;
            filter: alpha(opacity: 80);
            opacity: 0.8;
            -moz-opacity: 0.8;
            -khtml-opacity: 0.8;
            background: url(videoPlay.png) no-repeat 0px 0px;
            background-size: 65px 65px;
            -moz-background-size: 65px 65px;
            /* 老版本的 Firefox */
            background-repeat: no-repeat;
        }
    </style>

    <video preload="auto" id="movie" src="" webkit-playsinline='true' playsinline='true' x-webkit-airplay='true' x5-video-player-type='h5' x5-video-player-fullscreen='true' x5-video-ignore-metadata='true' width='100%' height='100%' style="object-fit: fit;"
        controls="controls">
        <p> 不支持video</p>
    </video>

    <div id="play" onclick="playvideo()"></div>

    <script>
        //从URL里获取视频链接，作为视频的src值
        function load() {
            let Movie_URL = GetURLString("url"),
                video = document.getElementById('movie');
            video.src = Movie_URL;
        }
        /** 点击播放按钮后的处理，让按钮消失，播放视频*/
        function playvideo() {
            playBtn = document.getElementById("play");
            playBtn.style.display = "none";
            video = document.getElementById("movie");
            video.play();
        }
    </script>
</body>

</html>